 <%- include('./layouts/head_layouts.ejs') %>
  <div class="main">
    <%- include('./layouts/navbar_layouts.ejs') %>
    <div class="container-fluid">
      <div class="page-title">
        <h1>所有文章</h1>
        <a href="post-add.html" class="btn btn-primary btn-xs">写文章</a>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="page-action">
        <!-- show when multiple checked -->
        <a id="mutiple" class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
        <form class="form-inline">
          <select name="" id='category' class="form-control input-sm">
            <option value="">所有分类</option>
            <option value="">未分类</option>
          </select>
          <select id='status' name="" class="form-control input-sm">
            <option value="all">所有状态</option>
            <option value="drafted">草稿</option>
            <option value="published">已发布</option>
            <option value="trashed">已作废</option>
          </select>
          <!-- <input class="btn btn-default btn-sm" type="button" value="筛选"> -->
          <button id='serch' class="btn btn-default btn-sm">筛选</button>
        </form>
        <ul id="page" class="pagination pagination-sm pull-right">
          <li><a href="#">上一页</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">下一页</a></li>
        </ul>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>标题</th>
            <th>作者</th>
            <th>分类</th>
            <th class="text-center">发表时间</th>
            <th class="text-center">状态</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="text-center"><input type="checkbox"></td>
            <td>随便一个名称</td>
            <td>小小</td>
            <td>潮科技</td>
            <td class="text-center">2016/10/07</td>
            <td class="text-center">已发布</td>
            <td class="text-center">
              <a href="javascript:;" class="btn btn-default btn-xs">编辑</a>
              <a href="javascript:;" id='delete-btn' class="btn btn-danger btn-xs">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!-- 确定删除的提示框 -->
  <div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document" style="position:relative;top:100px;">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">提示</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            你确定要删除吗？
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id='del-sure'>确定</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 删除成功或失败的提示框 -->
  <div class="modal fade" id="offDel" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document" style="position:relative;top:100px;">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">提示</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            删除成功
          </div>
        </div>
        <div class="modal-footer">
          <button id='offBtn' type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 确定批量删除的提示框 -->
  <div class="modal fade" id="mutipleId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document" style="position:relative;top:100px;">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">提示</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            你确定要删除吗？
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button id='mutipleDel' type="button" class="btn btn-primary" id='del-sure'>确定</button>
        </div>
      </div>
    </div>
  </div>
  <script type="text/html" id='template'>
     {{each $data item}}
     <tr data-id='{{item.id}}'>
       <td class="text-center"><input type="checkbox"></td>
       <td>{{item.title}}</td>
       <td>{{item.nickname}}</td>
       <td>{{item.name}}</td>
       <td class="text-center">{{item.created}}</td>
       
       <td class="text-center">
        {{if item.status== 'drafted'}}
          草稿
        {{else if item.status== 'published'}}
          已发布
        {{else if item.status== 'trashed'}}
          已作废
        {{/if}}
       </td>
       <td class="text-center">
         <a href="/admin/post-add/post-add.html?id={{item.id}}" class="btn btn-default btn-xs">编辑</a>
         <a href="javascript:;" id="delete-btn" class="btn btn-danger btn-xs">删除</a>
       </td>
     </tr>
     {{/each}}
  </script>
  <%- include('./layouts/aside_layouts.ejs') %>
  <%- include('./layouts/fooder_layouts.ejs') %>
  <script src="/assets/vendors/art-template/template-web.js"></script>
  <script src="/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
 <script src="/assets/js/posts.js"></script>
